<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
        width: 200px;
        height: 200px;
        border: 1px red solid;
        }
        input{
            /* border: 5px yellow solid; */
        }
    </style>
</head>
<body>
    <div>盒子</div>
    <input type="text">
    <script>
        // 1.找到元素，绑定事件，添加逻辑
        const div=document.querySelector('div')
        // 如果写了箭头函数 this 就是window
        // 用的时候普通的匿名函数，this就是当前这个dom元素
        div.addEventListener('click',function(){
            // console.log(this)
            // CSS中的-js中改为驼峰命名
            // 修改样式 先点style，再点样式
            this.style.backgroundColor='#0094ff'
            // 其他属性直接写即可
            this.innerHTML='fklljf'
        })
        div.addEventListener('mouseenter',function(){
            console.log('enter')
            this.style.backgroundColor='red'
        })
        div.addEventListener('mouseleave',function(){
            console.log('leave')
            this.style.backgroundColor='white'
        })

        // 获取输入框
        const ipt=document.querySelector('input')

        // 绑定事件
        // 需求1：失去焦点之后，如果输入框没有内容加上红色边框
        // 需求2：按了回车之后，获取用户输入的内容，弹框提示
        ipt.addEventListener('focus',function(){
            console.log('focus-获取焦点')
        })
        ipt.addEventListener('blur',function(){
            console.log('blur-失去焦点')
            console.log(this.value)
            if(this.value===''){
            // 加粗边框
                this.style.border='10px red solid'
            }
        })
        ipt.addEventListener('keydown',function(){
            console.log('keydown-按下')
        })
        // 有事件参数，要用可以获取
        ipt.addEventListener('keyup',function(){
            console.log('keyup-松开')
            console.log(e.keyCode)
            // 按了回车
            if(e.keyCode===13){
                // 获取输入的内容
                alert(this.value)
                // 弹框
            }
        })

        // 用户输入内容的时候，判断输入的内容，是否是邮箱
        // 不是，输入框变红
        // 是,变绿
        ipt.addEventListener('input',function(){
            console.log('input-输入')
        })
    </script>
</body>
</html>